// src/components/racing/TrackList.jsx
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { getItem } from '../../utils/localStorage';
import { useAuth } from '../../contexts/AuthContext';

const TrackList = () => {
  const [tracks, setTracks] = useState([]);
  const { user } = useAuth();

  useEffect(() => {
    const storedTracks = JSON.parse(getItem('tracks') || '[]');
    setTracks(storedTracks);
  }, []);

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold text-gray-900">可用赛道</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {tracks.map((track) => (
          <Link
            key={track.id}
            to={`/tracks/${track.id}`}
            className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
          >
            <div className="aspect-w-16 aspect-h-9">
              <img
                src={track.image}
                alt={track.name}
                className="w-full h-48 object-cover"
              />
            </div>
            <div className="p-4">
              <h2 className="text-xl font-semibold text-gray-900">{track.name}</h2>
              <p className="mt-2 text-gray-600">{track.description}</p>
              <div className="mt-4 flex items-center text-gray-500">
                <span className="text-sm">{track.location}</span>
              </div>
            </div>
          </Link>
        ))}
      </div>
      {!user && (
        <div className="mt-8 text-center">
          <Link
            to="/login"
            className="inline-block bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700"
          >
            登录以预订赛道
          </Link>
        </div>
      )}
    </div>
  );
};

export default TrackList;